import { useContext, useEffect } from "react";
import { WebsiteContext } from "../../contexts/Website";
import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
import { MemberContext } from "../../contexts/Member";
import authencation from "../../plugins/authencation";

export default function Mine() {
    const { setWebsite } = useContext(WebsiteContext);
    const { member, setMember } = useContext(MemberContext);

    useEffect(() => {
        setWebsite({title: '微信'});
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    if(!member) {
        return <></>;
    }

    // 退出登录，没有调用退出接口
    const onLogout = () => {
        authencation.logout();
        setMember({member: undefined, token: null});
    }

    // const friends: any[] = [];
    return <div className="flex flex-col bg-gray-100 min-h-[calc(100vh-48px-64px)]">
        <div className="p-4 flex gap-6 bg-white border-b">
            <div className="w-24 h-24 flex items-center justify-center bg-gray-100 shrink-0">
                <img src={member.avatar} alt="user avatar" className="w-full h-full rounded" />
            </div>
            <div className="flex flex-col gap-2">
                <div className="flex gap-4 text-xl font-medium">
                    <div>{member.username}</div>
                    <div className={`${member.gender === '1' ? 'text-blue-500' : 'text-red-500'}`}><UserOutlined /></div>
                </div>
                <div>地区: 中国 四川</div>
            </div>
        </div>
        <div className="h-4"></div>
        <div className="divide-y">
            <div className="flex gap-4 p-4 items-center bg-white" onClick={onLogout}>
                <div><LogoutOutlined /></div>
                <div>退出登录</div>
            </div>
        </div>
    </div>;
}
